<template>
    <view class="container">
        <view class="content_top">
            <view class="select_course_top">
                <view class="select_course_item">
                    <image class="top_icon" src="https://image1.sansancloud.com/xianhua/2020_3/4/15/26/34_50.jpg?x-oss-process=style/preview_120"></image>
                    <text class="select_course_type_name">{{listPage.courseName}}</text>
                </view>
                <view class="select_course_item" @tap="controlSearchPanel">
                    <text class="search_text">筛选</text>
                    <image class="top_icon" src="https://image1.sansancloud.com/xianhua/2020_3/4/15/17/59_315.jpg?x-oss-process=style/preview_120"></image>
                </view>
            </view>
        </view>
        <view class="days_list">
          <scroll-view scroll-x class="days_scroll_list" scroll-with-animation="true">
            <view class="days_item" v-for="(data, index) in nextSevenDaysList" :key="index" :data-info="data" :data-index="index" @click.stop="selectDataFun">
              <text class="days_item_data">{{data.oneDataStr}}</text>
              <text class="days_item_week" :style="listPage.dateIndex==index?'color:#fff;background:'+setting.platformSetting.defaultColor:''">{{data.weekData}}</text>
              <!--  :class="[listPage.dateIndex==index?'days_item_week active':'days_item_week']" -->
            </view>
          </scroll-view>
        </view>
        <swiper class="swiper" :style="'height:'+sysHeight+'px'" @change="selectDataFun" :current="listPage.dateIndex">
            <swiper-item v-for="(num,numIndex) in 7" :key="numIndex">
                <section-list-component id="sectionsList"  v-if="receiveData" :receiveData="receiveData" :params="params"></section-list-component>
                <!-- <scroll-view scroll-y class="section_list" v-if="sectionList[numIndex].length!=0">
                    <view class="section_item" v-for="(sectionItem,sectionIndex) in sectionList[numIndex]" :key="sectionIndex" :data-url="'section_detail.html?sectionId='+sectionItem.id" @tap="tolinkUrl">
                        <view class="section_item_left">
                            <image class="section_item_banner" mode="aspectFit" :src="sectionItem.banner"></image>
                            <text class="section_item_tag" v-if="sectionItem.contentType==1">视频</text>
                            <text class="section_item_tag" v-else-if="sectionItem.contentType==2">直播</text>
                            <text class="section_item_tag" v-else-if="sectionItem.contentType==3">音频</text>
                            <text class="section_item_tag" v-else>图文</text>
                        </view>
                        <view class="section_item_right">
                            <text class="section_item_name">{{sectionItem.title}}</text>
                            <text class="section_item_description">{{sectionItem.description}}</text>
                            <view class="section_item_bottom">
                                <view class="section_item_time">
                                    <image class="section_item_time_icon" src="https://image1.sansancloud.com/xianhua/2020_3/5/15/11/46_82.jpg?x-oss-process=style/preview_120"></image>
                                    <text class="section_item_time_value">{{sectionItem.startTime}}</text>
                                </view>
                                <text class="section_item_price" v-if="sectionItem.freeSection==1">免费</text>
                                <text class="section_item_price" v-else>￥{{sectionItem.sectionPrice}}</text>
                            </view>
                        </view>
                    </view>
                </scroll-view>
                <view class="noproduct" v-else>
                  <image mode="widthFix" src='https://image1.sansancloud.com/xianhua/2019_12/16/15/54/55_950.jpg?x-oss-process=style/preview_120'></image>
                  <text>没有相关课程</text>
                </view> -->
            </swiper-item>
        </swiper>
        <view class="mask_bg" v-show="searchTypeState" :animation="maskAnimationData" @tap="controlSearchPanel"></view>
        <view class="search_block" :animation="searchAnimationData">
            <view class="search_top">
                <view class="search_type_list">
                    <view class="search_type_item" v-for="(searchItem,searchIndex) in searchTypeList" :key="searchIndex" @tap="selectSearchType(searchIndex)">
                        <text class="search_type_name" :style="searchTypeIndex==searchIndex?'border-bottom:4rpx solid '+setting.platformSetting.defaultColor+';color:'+setting.platformSetting.defaultColor:''">
                            {{searchItem.name}}
                        </text>
                    </view>
                </view>
                <view class="search_fun">
                    <text class="clear_all" @tap="clearSearchBtn">清空</text>
                    <text class="sure_butn" :style="'background:'+setting.platformSetting.defaultColor" @tap="sureSearchBtn">确定</text>
                </view>
            </view>
            <scroll-view scroll-y  class="search_content_list">
                <view class="search_content_item" @tap="selectContentItem(contentItem)" v-for="(contentItem,contentIndex) in searchListObj[searchTypeIndex].listData" :key="contentIndex">
                    <text class="search_content_item_name" :style="searchListObj[searchTypeIndex].primaryId==contentItem.id?'color:#fff;background:'+setting.platformSetting.defaultColor:''">
                        {{contentItem.title||contentItem.name}}
                    </text>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>

export default {
  data() {
    return {
      maskAnimationData: {},
      searchAnimationData: {},
      setting: null,
      sysHeight:'1000',
      nextSevenDaysList: [],
      sectionList:[[],[],[],[],[],[],[]],
      receiveData:null,
      listPage:{
          page: 1,
          pageSize: 20,
          totalSize: 0,
          courseId: 0,
          courseName:'全部',
          dateStr:'',
          dateIndex:0,
          mendianId:0,
          mendianName:'全部',
          servantId:0,
          servantName:'全部',
      },
      courseTypeList:[],
      servantTypeList:[],
      mendianList:[],
      searchListObj:[
          {listData:[],selectId:0,primaryId:0,selectName:'全部'},
          {listData:[],selectId:0,primaryId:0,selectName:'全部'},
          {listData:[],selectId:0,primaryId:0,selectName:'全部'},
      ],
      searchTypeIndex:0,
      searchTypeState:false,
      searchTypeList:[
          {name:'课程',index:0},
          {name:'门店',index:1},
          {name:'教练',index:2},
      ]
    };
  },
  props: {},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("===options=====", options);
    var that = this;
    if (!getApp().globalData.setting) {
      console.log('-------------hasNoneSetting-----------');
      getApp().globalData.getSetting(that);
    } else {
      console.log('-------------hasSetting-----------');
      that.setData({
        setting: getApp().globalData.setting
      });
      console.log(that.setting);
    }
    that.getTypeData();
    that.getMendianData();
    that.getServantData();
    that.getNextSevenDays(7);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
      console.log("getApp().globalData.sysHeight",getApp().globalData.sysHeight)
      let that=this;
      that.setData({
          sysHeight:getApp().globalData.sysHeight,
      })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    wx.showNavigationBarLoading();
    that.selectComponent("#sectionsList").onPullDownRefresh();
    wx.hideNavigationBarLoading(); //完成停止加载
    wx.stopPullDownRefresh(); //停止下拉刷新
  },

  /* 分享 */
  onShareAppMessage: function (res) {
    // 分享页面
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('===onReachBottom====');
    let that = this
    that.selectComponent("#sectionsList").onReachBottom();
    // if (that.listPage.totalSize > that.listPage.page * that.listPage.pageSize) {
    //   that.listPage.page++
    //   // that.getSectionData(that.listPage,'upload');
    // }else{
    //     wx.showToast({
    //       title: "到底了~",
    //       image: '/wxcomponents/images/icons/tip.png',
    //       duration: 1000
    //     });
    // }
  },
  methods: {
    clearSearchBtn:function(){
        console.log("===clearSearchBtn===",)
        let that=this;
        let searchListObj=that.searchListObj;
        for(let i=0;i<searchListObj.length;i++){
            searchListObj[i].selectId=0;
            searchListObj[i].primaryId=0;
            searchListObj[i].selectName='全部'
        };
        that.setData({
            searchListObj:searchListObj
        })
    },
    sureSearchBtn:function(){
        console.log("===sureSearchBtn===",)
        let that=this;
        let searchListObj=that.searchListObj;
        let listPage=that.listPage;
        for(let i=0;i<searchListObj.length;i++){
            searchListObj[i].selectId=searchListObj[i].primaryId
        };
        listPage.courseId =searchListObj[0].selectId;
        listPage.courseName =searchListObj[0].selectName;
        listPage.mendianId=searchListObj[1].selectId;
        listPage.servantId=searchListObj[2].selectId;
        that.setData({
            listPage:listPage,
            searchListObj:searchListObj
        })
        // that.getSectionData(listPage);
        that.selectComponent("#sectionsList").setDataFun(listPage);
        that.controlSearchPanel(searchListObj);
    },
    selectContentItem:function(itemData){
        console.log("===selectContentItem===",itemData)
        let that=this;
        let itemId=itemData.id;
        let listPage=that.listPage;
        let itemName=itemData.name||itemData.title;
        let searchListObj=that.searchListObj
        searchListObj[that.searchTypeIndex].primaryId=itemId;
        searchListObj[that.searchTypeIndex].selectName=itemName;
        that.setData({
            searchListObj:searchListObj,
        })
    },
    selectSearchType:function(index){
        let that=this;
        console.log("====selectSearchType====",index)
        that.searchTypeIndex=index
    },
    controlSearchPanel:function(){
        let that=this;
        let opacity=0;
        let height=0;
        let searchListObj=that.searchListObj;
        if(that.searchTypeState){
            that.searchTypeState=false;
            for(let i=0;i<searchListObj.length;i++){
                searchListObj[i].primaryId=searchListObj[i].selectId
            };
        }else{
            that.searchTypeState=true;
            opacity=0.6;
            height='86%'
        }
        setTimeout(function(){
            let animation = wx.createAnimation({
              duration: 500,
              timingFunction: 'ease'
            });
            let animationTwo = wx.createAnimation({
              duration: 500,
              timingFunction: 'ease'
            });
            animation.opacity(opacity).step();
            animationTwo.height(height).step();
            that.setData({
              maskAnimationData: animation.export(),
              searchAnimationData:animationTwo.export(),
              searchListObj:searchListObj
            });
        },100)
    },
    selectDataFun:function(e){
        console.log("selectDataFun",e);
        let that=this;
        let index=e.currentTarget.dataset.index||e.currentTarget.dataset.index==0?e.currentTarget.dataset.index:e.detail.current;
        let itemData=that.nextSevenDaysList[index];
        console.log("====itemData===",itemData,that.nextSevenDaysList,index)
        that.$set(that.listPage,'dateStr',itemData.oneData)
        that.$set(that.listPage,'dateIndex',index)
        // that.getSectionData(that.listPage);
        that.selectComponent("#sectionsList").setDataFun(that.listPage);
    },
    /* 获取数据 */
    getMendianData: function (param) {
      var that = this
      let params=Object.assign({},param,{
          pageSize:100
      })
      var customIndex = getApp().globalData.AddClientUrl("/find_mendians.html", params)
      getApp().globalData.showToastLoading('loading', true)
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          wx.hideLoading()
          console.log(res.data)
          let dataArr=res.data.relateObj.result;
          dataArr.splice(0,0,{title:'全部',id:0})
          let searchListObj=that.searchListObj
          if (!dataArr || dataArr.length == 0) {
            that.setData({ mendianList: [] })
          } else {
            searchListObj[1].listData=dataArr
            that.setData({ 
                mendianList: dataArr,
                searchListObj:searchListObj
            })
          }
          wx.hideLoading()
        },
        fail: function (res) {
          console.log("fail")
          wx.hideLoading()
          getApp().globalData.loadFail()
        }
      })
    },
    getServantData: function (param) {
      var that = this
      let params=Object.assign({},param,{
          pageSize:100
      })
      var customIndex = getApp().globalData.AddClientUrl("/wx_find_servants.html", params)
      getApp().globalData.showToastLoading('loading', true)
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          wx.hideLoading()
          console.log(res.data)
          let dataArr=res.data.relateObj.result;
          dataArr.splice(0,0,{name:'全部',id:0})
          let searchListObj=that.searchListObj
          if (!dataArr || dataArr.length == 0) {
            that.setData({ servantTypeList: [] })
          } else {
            searchListObj[2].listData=dataArr
            that.setData({ 
                servantTypeList: dataArr,
                searchListObj:searchListObj
            })
          }
          wx.hideLoading()
        },
        fail: function (res) {
          console.log("fail")
          wx.hideLoading()
          getApp().globalData.loadFail()
        }
      })
    },
    getTypeData: function (param) {
      var that = this
      let params=Object.assign({},param,{
          pageSize:100
      })
      var customIndex = getApp().globalData.AddClientUrl("/wx_find_courses.html", params)
      getApp().globalData.showToastLoading('loading', true)
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          wx.hideLoading()
          console.log(res.data)
          let dataArr=res.data.relateObj.result;
          dataArr.splice(0,0,{title:'全部',id:0})
          let searchListObj=that.searchListObj
          if (!dataArr || dataArr.length == 0) {
            that.setData({ courseTypeList: [] })
          } else {
            searchListObj[0].listData=dataArr
            that.setData({ 
                courseTypeList: dataArr,
                searchListObj:searchListObj
            })
          }
          wx.hideLoading()
        },
        fail: function (res) {
          console.log("fail")
          wx.hideLoading()
          getApp().globalData.loadFail()
        }
      })
    },
    getNextSevenDays: function (num) {
      let that = this;
      let myDate = new Date();
      let curDayData = myDate.getDay();
      let curLocaleData = myDate.toLocaleDateString(); //获取当前日期

      console.log("====getNextSevenDays===", curDayData, curLocaleData);

      for (let i = 0; i < num; i++) {
        console.log("=======", i + curDayData);
        let switchData;
        let oneData;
        if (i + curDayData > 6 && i + curDayData < 14) {
          switchData = i + curDayData - 7;
        } else if (i + curDayData >= 14) {
          switchData = i + curDayData - 14;
        } else {
          switchData = i + curDayData;
        }
        switch (switchData) {
          case 0:
            oneData = that.getOneDay(i);
            that.nextSevenDaysList.splice(that.nextSevenDaysList.length, 0, {
              weekData: i != 0 ? '日' : '今',
              oneData: oneData,
              oneDataStr: oneData.slice(5).replace('-','.')
            });
            console.log("====getOneDay=====", i, that.getOneDay(i));
            console.log("===that.data.nextSevenDaysList===", that.nextSevenDaysList);
            break;

          case 1:
            oneData = that.getOneDay(i);
            that.nextSevenDaysList.splice(that.nextSevenDaysList.length, 0, {
              weekData: i != 0 ? '一' : '今',
              oneData: oneData,
              oneDataStr: oneData.slice(5).replace('-','.')
            });
            console.log("====getOneDay=====", i, that.getOneDay(i));
            console.log("===that.data.nextSevenDaysList===", that.nextSevenDaysList);
            break;

          case 2:
            oneData = that.getOneDay(i);
            that.nextSevenDaysList.splice(that.nextSevenDaysList.length, 0, {
              weekData: i != 0 ? '二' : '今',
              oneData: oneData,
              oneDataStr: oneData.slice(5).replace('-','.')
            });
            console.log("====getOneDay=====", i, that.getOneDay(i));
            console.log("===that.data.nextSevenDaysList===", that.nextSevenDaysList);
            break;

          case 3:
            oneData = that.getOneDay(i);
            that.nextSevenDaysList.splice(that.nextSevenDaysList.length, 0, {
              weekData: i != 0 ? '三' : '今',
              oneData: oneData,
              oneDataStr: oneData.slice(5).replace('-','.')
            });
            console.log("====getOneDay=====", i, that.getOneDay(i));
            console.log("===that.data.nextSevenDaysList===", that.nextSevenDaysList);
            break;

          case 4:
            oneData = that.getOneDay(i);
            that.nextSevenDaysList.splice(that.nextSevenDaysList.length, 0, {
              weekData: i != 0 ? '四' : '今',
              oneData: oneData,
              oneDataStr: oneData.slice(5).replace('-','.')
            });
            console.log("====getOneDay=====", i, that.getOneDay(i));
            console.log("===that.data.nextSevenDaysList===", that.nextSevenDaysList);
            break;

          case 5:
            let oneData = that.getOneDay(i);
            that.nextSevenDaysList.splice(that.nextSevenDaysList.length, 0, {
              weekData: i != 0 ? '五' : '今',
              oneData: oneData,
              oneDataStr: oneData.slice(5).replace('-','.')
            });
            console.log("====getOneDay=====", i, that.getOneDay(i));
            console.log("===that.data.nextSevenDaysList===", that.nextSevenDaysList);
            break;

          case 6:
            oneData = that.getOneDay(i);
            that.nextSevenDaysList.splice(that.nextSevenDaysList.length, 0, {
              weekData: i != 0 ? '六' : '今',
              oneData: oneData,
              oneDataStr: oneData.slice(5).replace('-','.')
            });
            console.log("====getOneDay=====", i, that.getOneDay(i));
            console.log("===that.data.nextSevenDaysList===", that.nextSevenDaysList);
            break;
        }
      }
      let listPage = that.listPage;
      listPage.dateStr = that.nextSevenDaysList[0].oneData;
      that.setData({
        listPage: listPage,
        nextSevenDaysList: that.nextSevenDaysList
      });
      that.setData({receiveData:{jsonData:listPage}})
      // that.getSectionData(listPage)
    },
    getOneDay: function (day,type) {
      var dd = new Date();
      dd.setDate(dd.getDate() + day); //获取AddDayCount天后的日期 

      var y = dd.getFullYear();
      var m = dd.getMonth() + 1 < 10 ? (type=='00'?'0':'') + (dd.getMonth() + 1) : dd.getMonth() + 1; //获取当前月份的日期 

      var d = dd.getDate() < 10 ? (type=='00'?'0':'') + dd.getDate() : dd.getDate();
      return y + "-" + m + "-" + d;
    },
    /* 获取数据 */
    // getSectionData: function (param) {
    //   var that = this
    //   var customIndex = getApp().globalData.AddClientUrl("/wx_find_courses_sections.html", param)
    //   getApp().globalData.showToastLoading('loading', true)
    //   wx.request({
    //     url: customIndex.url,
    //     header: getApp().globalData.header,
    //     success: function (res) {
    //       wx.hideLoading()
    //       console.log(res.data)
    //       let dataArr=res.data.relateObj.result
    //       if (!dataArr || dataArr.length == 0) {
    //         that.sectionList.splice(param.dateIndex,1,[])
    //         // that.setData({ sectionList: [] })
    //       } else {
    //         that.sectionList.splice(param.dateIndex,1,dataArr)
    //         // that.setData({ sectionList: dataArr })
    //       }
    //       wx.hideLoading()
    //     },
    //     fail: function (res) {
    //       console.log("fail")
    //       wx.hideLoading()
    //       getApp().globalData.loadFail()
    //     }
    //   })
    // },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom2: function () {
      var that = this;
      console.log("=======bottom======", this.canRefresh);

      if (this.canRefresh) {
        this.setData({
          canRefresh: false
        });
        setTimeout(function () {
          if (that.listPage.totalSize > that.listPage.curPage * that.listPage.pageSize) {
            that.listPage.page++;
            that.params.page++;
            that.getShopListData(that.params);
          }
        }, 300);
      }
    },
    /* 组件事件集合 */
    tolinkUrl: function (e) {
      console.warn("=======e=======", e);
      let linkUrl = e.currentTarget?e.currentTarget.dataset.url:e;
      getApp().globalData.linkEvent(linkUrl);
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
@import "./index.css";
</style>